<template>
    <div class="echart" id="cpsHomePie"></div>
</template>
<script>
import echart from "echarts";
import {getAlarmInfo} from "@/api/scada";

export default {
	name: "echart",
	props: {},
	data() {
		return {
			option:{
				backgroundColor: "#fff",
				textStyle: {
					fontWeight: 400,
					fontSize: 14,
					color: "#666"
				},
				tooltip: {
					trigger: "axis",
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
					},
					formatter: function (list) {
						return `${list[0].name}：${list[0].data}次`;
					}
				},
				grid: {
					left: 20,
					right: 50,
					top: 50,
					bottom:10,
					containLabel: true
				},
				xAxis: {
					type: 'category',
					axisTick: {
						show: false
					},
					axisLine: {
						lineStyle: {
							color: "#E8E8E8",
							width: 1
						}
					},
					data: ["故障告警", "工况告警", "越限告警"]
				},
				yAxis: {
					name: "单位(次)",
					nameTextStyle: {
						fontWeight: 400,
						fontSize: 14,
						color: "#666"
					},
					type: "value",
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						lineStyle: {
							color: "#E8E8E8"
						}
					}
				},
				series: [
					{
						name: "fact",
						type: "bar",
						stack: "fact",
						barMaxWidth: 20,
						data: [],
						itemStyle: {
							normal: {
								color: "#90d66d"
							}
						}
					},
					{
						name: "virtual",
						type: "bar",
						stack: "fact",
						barMaxWidth: 20,
						data: [],
						itemStyle: {
							normal: {
								color: "#e8e8e8"
							}
						}
					}
				]
			}
		};
	},

	mounted() {
		let me = this;
		let echartBox = document.querySelector("#cpsHomePie");
		let myCahrt = echart.init(echartBox);
		getAlarmInfo().then(res => {
			let obj = {};
			if (res.code === 200) {
				obj = res.result;
				let faultAlarm = +obj.faultAlarm || 21;
				let workAlarm = +obj.workAlarm || 29;
				let crossAlarm = +obj.crossAlarm || 28;
				let sum = faultAlarm + workAlarm + crossAlarm;
				sum = Math.floor(sum * 0.8);
				let data = [faultAlarm, workAlarm, crossAlarm];
				me.option.series[0].data = data;
				me.option.series[1].data = data.map(item => sum - item);
				myCahrt.setOption(me.option, true);
			}

		});
	},
	computed: {},
	created() {
	},
	watch: {},
	methods: {},
	components: {}
};
</script>

<style scoped lang="scss">
    .echart {
        height: 240px;
    }
</style>
